<template>
  <div class="index-user-satisfy">
    <div class="index-module-header-mini">
      <div class="index-module-title" style="color:white;">雷达图</div>
    </div>
    <div ref="chartRef" class="index-user-satisfy-chart"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const { proxy } = getCurrentInstance()
const router = useRouter()

const chartRef = ref(null);
let mapChart = null;

let indicatorData = [
  {
    name: "火警状态",
  },
  {
    name: "到期状态",
  },
  {
    name: "离线状态",
  },
  {
    name: "故障状态",
  },
];

let legendData = ["成都", "绵阳", "宜宾"];
let option = {
  legend: {
    data: legendData,
    orient: "horizontal",
    top: 0,
    left: "center",
    itemWidth: 12,
    itemHeight: 4,
    itemGap: 30,
    textStyle: {
      fontSize: 10,
      color: "rgba(255,255,255,0.6)",
    },
  },
  radar: {
    center: ["50%", "55%"],
    indicator: indicatorData,
    radius: "55%",
    splitNumber: 5,
    shape: "circle",
    startAngle: 90,
    axisName: {
      color: "#C2AA90FF",
      fontSize: 11,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "#CFA67266",
        width: 1,
        curveness: 0.2,
      },
    },
    splitArea: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        type: "dotted",
        color: "#CFA67266",
      },
    },
    axisLabel: {
      show: false,
      formatter: function (value, index) {
        return value + "%";
      },
    },
  },
  series: [
    {
      name: "雷达图",
      type: "radar",
      tooltip: {},
      data: [
        {
          value: [40, 120, 140, 40],
          name: "成都",
          symbol: "circle",
          symbolSize: 5,
          itemStyle: {
            // color: "rgba(0,0,0,0)",
            color: "#24C5D0FF",
            borderColor: "#24C5D0FF",
            borderWidth: 1,
          },
          lineStyle: {
            width: 1,
            color: "#24C5D0FF",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#24C5D0FF",
                },
                {
                  offset: 1,
                  color: "#2D6584FF",
                },
              ],
              globalCoord: false,
            },
            opacity: 0.8, // 区域透明度
          },
        },
        {
          value: [90, 80, 50, 100],
          name: "绵阳",
          symbol: "circle",
          symbolSize: 5,
          itemStyle: {
            // color: "rgba(0,0,0,0)",
            color: "#F1B86DFF",
            borderColor: "#F1B86DFF",
            borderWidth: 1,
          },
          lineStyle: {
            width: 1,
            color: "#F1B86DFF",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#7E6344FF",
                },
                {
                  offset: 1,
                  color: "#4B4030FF",
                },
              ],
              globalCoord: false,
            },
            opacity: 0.8, // 区域透明度
          },
        },
        {
          value: [30, 40, 80, 150],
          name: "宜宾",
          symbol: "circle",
          symbolSize: 5,
          itemStyle: {
            // color: "rgba(0,0,0,0)",
            color: "#4F5FF0FF",
            borderColor: "#4F5FF0FF",
            borderWidth: 1,
          },
          lineStyle: {
            width: 1,
            color: "#4F5FF0FF",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#3C4CA1FF",
                },
                {
                  offset: 1,
                  color: "#30364BFF",
                },
              ],
              globalCoord: false,
            },
            opacity: 0.8, // 区域透明度
          },
        },
      ],
    },
  ],
};

const resizeHandler = () => {
  mapChart.resize();
};
const renderMap = () => {
  if (!mapChart) {
    mapChart = echarts.init(chartRef.value, null, {
      renderer: "svg",
    });
  }
  mapChart.dispatchAction({
    type: "restore",
  });
  mapChart.setOption(option);
  mapChart.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
};
onMounted(() => {
  renderMap();
  window.addEventListener("resize", resizeHandler);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeHandler);
});
</script>

<style lang="scss">
.index-user-satisfy {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: #1f1b17;

  // background: rgba(98, 81, 55, 0.1);
  .index-user-satisfy-chart {
    width: 100%;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    padding: 0 8px;
    // border: 1px solid red;
  }
}
</style>
